<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.6.2/vue.min.js"></script>
<title>组件间的嵌套</title>
<style>
.row {
	margin-top: 30px;
	border:1px solid #e653ff;
	padding-top:12px;
	padding-bottom:12px;
	position:relative;
}
.col{
	display:inline-block;
	bottom:0;
	width:50px;
}
</style>
</head>
<body>
<div id="app" class="row">
	<parent-grade :group="group"></parent-grade>
	
	
	
	
	
	
	
	
	
	
	<!-- <div class="col">总分：{{total}}</div>
	<div v-for="name in group" class="col">
		<child-grade v-bind:name="name" @find-add-total="addtotal()"></child-grade>
	</div>
	
	<div class="col">总分：{{total}}</div>
	<div v-for="name in group" class="col">
		<child-grade v-bind:name="name" @find-add-total="addtotal()"></child-grade>
	</div>
	</br>
	<div class="col">总分：{{total}}</div>
	<div v-for="name in group" class="col">
		<child-grade v-bind:name="name" @find-add-total="addtotal()"></child-grade>
	</div> -->
	
</div>

<script>
	//组件间的嵌套
	Vue.component('parent-grade',{
		props:['group'],
		data(){
			return{
				total:0
			}
			
		},
		template:`
		<div>
		<div class="col">总分：{{total}}</div>
		<div v-for="name in group" class="col">
			<child-grade v-bind:name="name" @find-add-total="addtotal()"></child-grade>
		</div>
		</div>
		`,
		methods:{
			addtotal:function(){
				this.total+=3;
			}
		}
		
	})
	

	Vue.component('child-grade',{
		props:['name'],
		data:function(){
			return{
				score:0
			}
		},
		
		template:`
		
		<div class="col">
		<div>{{score}}分</div>
		<div :style="styleObj"></div>
		<button @click="add()">{{name}}</button>
		</div>
		
		`,
		computed:{
			styleObj:function(){
				return{
					width:'43px',
					height:5+this.score+'px',
					background:'#55557f'
				}
			}
		},
		methods:{
			add:function(){
				this.score+=3;
				this.$emit('find-add-total')//产生事件 每点一次
				
			}
		}
	})
	
	
	new Vue({
		el:"#app",
		data:{
			group:["张三","李四","王五"],
			total:0
			
		
		},
		methods:{
			addtotal:function(){
				this.total+=3
			}
		}
	
	})
</script>
</body>
</html>
